import React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'gatsby';
import { Layout, Wrapper, Header, /*Button, */ Content, SectionTitle } from '../components';

import config from '../../config/SiteConfig';

export default () => {
  const workList = [
    {
      title: '词条系统',
      href: '//zfy95.gitee.io/entry-system/#/admin/index',
      img: '//zfy95.gitee.io/static/img/entry-system/%E5%9B%BE%E7%89%871.png',
      description: '该系统集成需要做国际化的应用的词条，同时允许开放给用户在线对应用进行自由翻译。',
      technology: 'Vue + Element-ui + Axios + Vue-i18n + Handsontable 等等',
    },
    {
      title: '智慧门禁系统',
      href: '//zfy95.gitee.io/guard-system/',
      img: '//zfy95.gitee.io/static/img/guard-system/%E5%9B%BE%E7%89%871.png',
      description:
        '人脸识别终端配套的智慧门禁系统，用户可以进行远程管控设备、上传人脸照片、查阅识别记录，告警邮件等操作。',
      technology: 'React + Ant Design Pro + Dva + Umi + Moment + Lodash 等等',
    },
    {
      title: '集控系统',
      href: '//zfy95.gitee.io/control-system/',
      img: '//zfy95.gitee.io/static/img/control-system/%E5%9B%BE%E7%89%871.png',
      description:
        '智能终端配套的远程管控系统，用户可以远程进行升级终端应用、监控画面、定时开关机、定时音量等操作。',
      technology: 'Vue + Element-ui + Vuex + Axios + Vue-i18n 等等',
    },
    {
      title: '信息发布系统',
      href: '//lango-tech.cn/apm-web/',
      img: '//zfy95.gitee.io/static/img/apm-web/%E5%9B%BE%E7%89%871.png',
      description:
        '广告机配套的信息发布及远程管控系统，用户可以进行上传素材、广告制作、信息发布、终端监控、数据统计等操作。（体验账号：youke 密码：youke）',
      technology: 'JSP + Bootstrap + JQuery + Webupload + Highcharts + Umeditor 等等',
    },
    {
      title: '公司官网',
      href: '//zfy95.gitee.io/lango19/',
      img: '//zfy95.gitee.io/static/img/lango19/%E5%9B%BE%E7%89%871.png',
      description:
        '某公司官网、社招网、校招网，用于介绍公司业务、产品、服务、招聘、文化环境等信息。',
      technology: 'Gulp + Bootstrap + JQuery + Slick + Wow + Marked 等等',
    },
    {
      title: '多媒体-快传-投票器',
      href: '//zfy95.gitee.io/multimedia-upload-votekit/',
      img: '//zfy95.gitee.io/static/img/multimedia-upload-votekit/%E5%9B%BE%E7%89%871.png',
      description:
        '智能终端配套的多媒体、快传、投票器等H5应用，用于手机上传图片、视频等资源到终端展示，涉及会议、教育等领域',
      technology: 'Vue + Vant UI + Axios + Vue-i18n + Postcss-pxtorem + Vconsole 等等',
    },
    {
      title: '大学作品集',
      href: '//zfy95.gitee.io/showreel/',
      img: '//zfy95.gitee.io/static/img/showreel/%E5%9B%BE%E7%89%871.png',
      description: '集成本人在大学期间所做的部分作品，同时展示一些较为有趣的网页效果',
      technology:
        'Vue + Element-ui + Tween + Ks-vue-fullpage + Video-player + Pdfjs-dist + Hammerjs 等等',
    },
    {
      title: '大数据集成平台',
      href: '//zfy95.gitee.io/big-data-platform/',
      img: '//zfy95.gitee.io/static/img/big-data-platform/%E5%9B%BE%E7%89%871.png',
      description:
        '集成公司的门户网站、大数据精细化管理平台，用于展示公司资料信息，及数据的可视化展示、监测、警报等',
      technology: 'JQuery + Bootstrap + Echarts + Datatables 等等',
    },
    {
      title: '书城H5应用',
      href: '//zfy95.gitee.io/chuang-bie/',
      img: '//zfy95.gitee.io/static/img/chuang-bie/%E5%9B%BE%E7%89%871.png',
      description:
        '分类展示电子图书的信息，有收藏书架、精品推荐及链接京东、当当、亚马逊电商平台等功能',
      technology: 'Vue + IView + Axios + Jsonp + Lazyload + Swiper 等等',
    },
  ];

  return (
    <Layout>
      <Helmet title={`作品集合 | ${config.siteTitle}`} />
      <Header>
        <Link to="/">{config.siteTitle}</Link>
        <SectionTitle uppercase={true}>作品集合</SectionTitle>
      </Header>
      <Wrapper>
        {workList.map((work) => (
          <Content key={work.title} className="works">
            <h2>
              <svg
                className="icon"
                viewBox="0 0 1026 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3305"
                width="22"
                height="22"
              >
                <path
                  d="M968.17199 417.657726l-94.507347 94.379549c-58.915331 58.915331-146.393735 70.736737-217.513869 36.870006L873.664643 331.329513a63.835592 63.835592 0 0 0 0-90.353881L783.374661 150.493952a63.835592 63.835592 0 0 0-90.353881 0L475.443012 368.13562c-33.86673-71.184033-22.045325-158.662437 36.870007-217.641668l94.315649-94.379549c74.890204-74.826304 196.299238-74.826304 271.061643 0l90.481679 90.353881c74.762405 74.890204 74.762405 196.299238 0 271.189442zM331.605257 692.681137a63.835592 63.835592 0 0 1 0-90.353881l271.061643-271.061643c24.984701-24.984701 65.36918-24.984701 90.35388 0s24.984701 65.36918 0 90.353881L421.959138 692.681137a63.835592 63.835592 0 0 1-90.353881 0zM150.833596 783.098917l90.353881 90.353881a63.835592 63.835592 0 0 0 90.35388 0l217.641668-217.641668c33.86673 71.184033 22.045325 158.662437-36.870006 217.641668l-86.392113 94.379549a191.677174 191.677174 0 0 1-271.125542 0l-98.405217-98.341317a191.783674 191.783674 0 0 1 0-271.125542l94.379549-86.392113c59.04313-58.915331 146.457634-70.736737 217.705567-36.870006L150.833596 692.681137a64.02729 64.02729 0 0 0 0 90.41778z"
                  p-id="3306"
                  fill="#72cc96"
                ></path>
              </svg>{' '}
              <a href={work.href} target="_blank">
                {work.title}
              </a>
            </h2>
            <div>
              <img src={work.img} alt={work.title} />
            </div>
            <p>说明：{work.description}</p>
            <p>技术栈：{work.technology}</p>
          </Content>
        ))}
        <Content className="works">
          <p>未完待续...</p>
        </Content>
      </Wrapper>
    </Layout>
  );
};
